import { EChartOption } from "echarts";

export function option(data: { percentage: number, frequency: number, name: string }, angle = 0): EChartOption {
    let value = data.percentage;
    return {
        title: [{
            text: data.frequency,
            x: '42%',
            y: '35%',
            textAlign: 'center',
            textStyle: {
                fontSize: '18',
                color: '#0FF',
                textAlign: 'center',
            },
        }, {
            text: data.name,
            left: '42.5%',
            top: '52%',
            textAlign: 'center',
            textStyle: {
                fontSize: '15',
                color: 'white',
                textAlign: 'center',
            },
        }],
        series: [{
            name: "ring5",
            type: 'custom',
            zlevel: 2,
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2.2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (0 + angle) * Math.PI / 180,
                        endAngle: (90 + angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB", /* 紫色 */
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            zlevel: 2,
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2.2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                        startAngle: (180 + angle) * Math.PI / 180,
                        endAngle: (270 + angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#0CD3DB", /* 绿色 */
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            zlevel: 2,
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2.2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                        startAngle: (270 + -angle) * Math.PI / 180,
                        endAngle: (40 + -angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#4386FA",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            zlevel: 2,
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                return {
                    type: 'arc',
                    shape: {
                        cx: api.getWidth() / 2.2,
                        cy: api.getHeight() / 2,
                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                        startAngle: (90 + -angle) * Math.PI / 180,
                        endAngle: (220 + -angle) * Math.PI / 180
                    },
                    style: {
                        stroke: "#4386FA",
                        fill: "transparent",
                        lineWidth: 1.5
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            zlevel: 3,
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                let x0 = api.getWidth() / 2.2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
                let point = getCirlPoint(x0, y0, r, (90 + -angle));
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            zlevel: 2,
            name: "ring5",
            type: 'custom',
            coordinateSystem: "none",
            renderItem: function (params: any, api: { getWidth: () => number; getHeight: () => number; }) {
                let x0 = api.getWidth() / 2.2;
                let y0 = api.getHeight() / 2;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
                let point = getCirlPoint(x0, y0, r, (270 + -angle));
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 4
                    },
                    style: {
                        stroke: "#0CD3DB",
                        fill: "#0CD3DB"
                    },
                    silent: true
                };
            },
            data: [0]
        }, {
            name: '',
            type: 'pie',
            radius: ['70%', '60%'],
            silent: true,
            right: '10%',
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 1,
            label: {
                normal: {
                    position: "center",
                }
            },
            data: [{
                value: value,
                name: "",
                itemStyle: {
                    normal: {
                        color: {
                            colorStops: [{
                                offset: 0,
                                color: '#A098FC' // 0% 处的颜色
                            },
                            {
                                offset: 0.3,
                                color: '#4386FA' // 0% 处的颜色
                            },
                            {
                                offset: 0.6,
                                color: '#4FADFD' // 0% 处的颜色
                            },
                            {
                                offset: 0.8,
                                color: '#0CD3DB' // 100% 处的颜色
                            }, {
                                offset: 1,
                                color: '#646CF9' // 100% 处的颜色
                            }]
                        },
                    }
                }
            },
            {
                value: 100 - value,
                name: "",
                label: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#173164"
                    }
                }
            }
            ]
        }]
    } as unknown as EChartOption;

    function getCirlPoint(x0: number, y0: number, r: number, angle: number) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
            x: x1,
            y: y1
        }
    }


}
